<template>
  <div class="img-text-list">
    <div class="img-text">
      <div class="content" v-for="(item, index) in dataList" :key="index" @click="goDesc(item)">
        <img :src="item.title_page || require('../static/artShop/basis/art-shop.png')" alt="" />
         <div class="img-text-title">
          {{ item?.name }}
        </div>
        <!-- <div class="address">
          {{ item.address }}
        </div>
        <div class="time">
          {{ item.time }}
        </div> -->
      </div>
    </div>
    <div class="see-more">
      <div class="line"></div>
      <div @click="go" class="text">查看更多<img src="@/static/img/home/arrow.png" alt=""></div>
    </div>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
import { getToken } from "@/utils/auth";

export default {
  name: '',
  components: {},
  props: {
    type: {
      type: String,
      default: ''
    },
    dataList: {
      type: Array,
      default: () => {
        return {}
      }
    },
    goUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    getImgUrl,
    go() {
      this.$router.push(this.goUrl)
    },
    // 进入视频详情页
    goDesc(data) {
      if (this.type === '3dmodle' || this.type === 'vrstadiums') {
        if (!getToken()) return this.$message.warning('请先登陆才可以查看展厅详情')
        this.$router.push({
          path: "/artShop/showRoom",
          query: { data_id: data.data_id, type: this.type === '3dmodle' ? 'threeModle' : this.type },
        });
      } else {
        this.$router.push({
          path: `/artShop/${this.type}`,
          query: {
            data_id: data.data_id
          }
        })
      }
    },
  }
}
</script>

<style scoped lang="less">
.img-text-list {
  .img-text {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 412px);
    grid-gap: 10px;
  }

  .content {
    width: 412px;
    margin-bottom: 60px;
    cursor: pointer;

    img {
      width: 412px;
      height: 550px;
      margin-bottom: 24px;
      object-fit: cover;
    }

    .img-text-title {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      margin-bottom: 12px;
    }

    .address {
      line-height: 16px;
      font-size: 16px;
      font-weight: bold;
      color: #999;
      margin-bottom: 10px;
    }

    .time {
      line-height: 13px;
      font-size: 16px;
      font-weight: bold;
      color: #999;
    }
  }

  .see-more {
    margin: 0;
  }
}
</style>
